﻿@{
    ViewBag.Title = "CloudTree";
    ViewBag.Message = "Dropbox";
}
@section featured 
{
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
            </p>
        </div>
    </section>
}

<div class="MainContent">
</div>

<h3>Hello Ciaràn,</h3>


        <INPUT type="button" style="height: 40px; width:100px;" value="Upload" runat="server" id="UploadBtnDB"/>

        <INPUT type="button" style="height: 40px; width:100px;" value="Download" runat="server" id="DownloadBtnDB"/>

        <INPUT type="button" style="height: 40px; width:100px;" value="Create" runat="server" id="CreateBtnDB"/>

        <INPUT type="button" style="height: 40px; width:100px;" value="Delete" runat="server" id="DeleteBtnDB"/>
         <input type="button" title="LinkDrBx" value="Link to Dropbox" onclick="location.href='@Url.Action("Dropbox", "Link")'" />


        <div id="drop-zone">Drop files here</div>

        <input type="file" id="files" name="files[]" multiple/>
        <output id="list1"></output>

        <script type="text/javascript">
            function handleFileSelect(evt) {

                evt.stopPropogation();
                evt.preventDefault();
                var files = evt.dataTransfer.files;//FileList object

                //fileList object
                var output = new Array();
                for (var i = 0, f; f = files[i]; i++) {
                    output.push('<li><strong>', escape(f.name), '</strong>(', f.type || 'n/a', ') - ', f.size, 'bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocalDateString() : 'n/a', '</li>');
                }
                document.getElementById('list').innerHTML = <'<ul>' + output.join('') + '</ul>';
                            
            }
              document.getElementById('files').addEventListener('change', handleFileSelect, false);
        </script>


<select id="list" size="10" style="width: 15em"></select><br/>
<button id="plusBtn">  +  </button>
<button id="minusBtn">  -  </button>